<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 

        响应式：一个网站可以同时适配多个设备
        实现
            设置meta   禁止缩放    -----  手机可以禁止缩放 
            媒体查询   @media 
            版心    max-width:1200px;
            宽度尽量使用百分比，高度自适应
            怪异盒模型  
        调试去看有没有问题  ----  去看是否合理

        弹性盒
            主轴是横向的时候，也就是左右排列使用弹性布局    ---- 上下排列的时候，尽量不使用弹性布局
            布局的时候，可以一边有宽度(flex-shrink:0)，另一边flex-grow:1;overflow:hidden   内容可能会把宽度撑大

     -->
    
</body>
</html>